@import "./../theme";
@import "./../var";
@import "./widget-vars";

.widget-collapse {
  padding: $widget-item-common-padding;
  position: relative;
  border-radius: $radiusRegular;
  margin-top: $widget-item-common-margin;
  overflow: initial;
  margin-bottom: 1rem;

  .el-collapse-item__header {
    padding-left: 1rem;
    border-bottom: 1px solid $borderColorLight !important;
    @include text-ellipsis;
    box-sizing: border-box;

    .el-collapse-header-title {
      @include text-ellipsis;
    }
  }

  .widget-collapse-item {
    border-left: 1px solid $borderColorLight;
    border-right: 1px solid $borderColorLight;

    .el-collapse-item__wrap {
      padding: $widget-item-common-padding;
      background: $widget-container-bg;
    }

    .el-collapse-item__content {
      padding: $widget-item-common-padding;
      position: relative;
      box-sizing: border-box;
      background: $bgColorPrimary;
      border: $widget-container-border;
      border-radius: $radiusRegular;
    }

    &.is-empty {
      .el-collapse-item__content {
        background: $widget-container-bg-hover;
      }
    }

  }

  &.active {
    background: $widget-container-bg-active;

    .el-collapse-item__wrap {
      background: $widget-container-bg-active;
    }
  }

  &:hover {
    background: $widget-container-bg-hover;

    &.active {
      background: $widget-container-bg-hover-active;
    }
  }

  &::after {
    display: none;
  }
}
